<template>
   <UserCardList :userList="userList"></UserCardList>
</template>

<script setup lang="ts">
    //注意区别useRoute和useRouter，两者是不同的。
    import {useRoute} from 'vue-router'
    import {onMounted,ref} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showSuccessToast,showFailToast} from "vant";
    import qs from 'qs'//查询字符串的解析器
    import UserCardList from '../components/UserCardList.vue'

    const route = useRoute()
    const {tags} = route.query
    const userList = ref([]);

    //利用axios向后端发起请求，将前端所选中的标签数据传到后端进行逻辑的判定
    onMounted(async () => {
        const userListData = await myAxois.get('/user/search/tags',{
            params:{
                tagList:tags
            },
            paramsSerializer:params =>  {
                return qs.stringify(params,{arrayFormat: "repeat"})
            }
        })
        .then(function (response) {
            console.log("/user/search/tags success",response);
            showSuccessToast("请求成功！")
            return response.data?.data;//这里的？是因为怕第一个data为空，可选列操作符
        })
        .catch(function (error) {
            console.error("/user/search/tags error",error);
            showFailToast("请求失败！")
        });
        if(userListData){
            //因为后端存放的tags标签数据是json格式的字符，所以要将其解析成字符串的格式
            userListData.forEach(user =>{
                if(user.tags){
                    user.tags = JSON.parse(user.tags);
                }
            })
            userList.value = userListData
        }
    })

    //第二种axios向后端发请求的方法【但是未能实现】
    // myAxois({
    //     method: 'get',
    //     url: '/user/search/tags',
    //     data: {
    //         tagList:tags
    //     }
    // })
    // .then(function (response) {
    //     console.log("/user/search/tags success",response);
    //     showSuccessToast("请求成功！")
    // })
    // .catch(function (error) {
    //     console.error("/user/search/tags error",error);
    //     showFailToast("请求失败！")
    // });

    //定义一些假数据
    // const mockUser = {
    //     id:1252,
    //     username:"张三",
    //     userAccount:"123456",
    //     avatar:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    //     gender:0,
    //     profile:"我是大三的学java的学生，目前的专业是软件工程aaaaaaaaaaaaaaa",
    //     phone:"13823413627",
    //     email:"123456@qq.com",
    //     createTime:new Date(),
    //     role:0,
    //     tags:['java','c++','学生','emo','单身'],
    // }

    //将假数据存入到ref风格的数组中，这样才能被展示出来

</script>

<style scoped>

</style>